<template>
  <!-- 上面内容：面包屑 -->
  <div class="container-top">
    <TopContent />
  </div>

  <!-- 下面内容 -->
  <div class="container-bottom">

    <!-- 左边：数据源分类 -->
    <div class="container-left">
      <LeftContent :sendLabel="getLabel" />
    </div>

    <!-- 右边：数据源管理 -->
    <div class="container-right">
      <RightContent :label="label" />
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import TopContent from './content/TopContent.vue'
import LeftContent from './content/LeftContent.vue'
import RightContent from './content/RightContent.vue'


// 接受通信value，发射通信label
let label = ref('');
function getLabel(value: string) {
  // console.log(value)
  label.value = value;
  // console.log(label.value)
}
</script>

<style>
/* 高度：40px */
.container-top {
  width: 100%;
  height: 40px;
  background-color: #ffffff;
}

.container-bottom {
  width: 100%;
  height: calc(100vh - 100px);
  background-color: #ececec;
}

/* 宽度：285px=10+270+5 */
.container-left {
  width: 285px;
  height: calc(100vh - 100px);
  float: left;
  background-color: #ececec;
}

.container-right {
  width: calc(100% - 285px);
  height: calc(100vh - 100px);
  float: left;
  background-color: #ececec;
}
</style>